import {Component} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: `
    <h1>{{title}}</h1>
    <div class="navLink">
        <a routerLink="/dashboard" routerLinkActive="active">dashboard</a>
        <a routerLink="/heroes" routerLinkActive="active">heroes</a>
    </div>
    <router-outlet></router-outlet>
  `,
    styles:[`
        .navLink{margin-bottom: 10px}
        .navLink a{display: inline-block;padding: 5px 15px;background: #336699;color: #fff;text-decoration: none;}
        .navLink a:hover,.navLink a.active{background: #639998;}
        
    `]

})
export class AppComponent {
    title = 'My Heroes';
}
